<script setup>
import { onMounted, ref } from 'vue'
import { io } from "socket.io-client";
import { commonAjax } from '@/util/request.js'
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
console.log('userInfo', userInfo);

const getuserDatail = () => {
  let _this = this;
  return new Promise((resolve, reject) => {
    commonAjax({
      url: `${Config.serverUrl}/user/findOne`,
      data: {
        userid: userInfo.value.userid
      },
    })
      .then((result) => {

        if (result && result.code == 200) {
          userInfo.value = result.data
        }
        console.log(userInfo.value);
      })
      .catch((err) => {
        ElMessage.warning(err.message)
      });
  })
}
getuserDatail()
let messageList = ref([]);//消息列表
let groupList = ref([]);//消息列表
let nowmessagelist = ref([]);
let lock = ref(true);//防c止重复发送消息
let ipt = ref();
let controller = new AbortController();
const socket = io('ws://111.229.148.175:3000/');
const conversationId = ref();
socket.on('connect', () => {
  console.log('建立链接');
  socket.on('chatContent', (message) => {
    conversationId.value = message.conversationId
    nowmessagelist.value[nowmessagelist.value.length - 1].message += message.content;
  })
  socket.on('chatDone', (message) => {
    lock.value = true;
    console.log('chatDone', message);
  })
})
socket.on('generationStopped', (status) => {
  console.log('AI 生成已停止', status);
});
function sendai() {
  lock.value = false;
  socket.emit('chat', {
    conversationId: conversationId.value,
    message: nowmessagelist.value
  })
}

const name = userInfo.value.username || '用户';

//键盘按下发送消息
function push() {
  console.log(lock.value);

  if (ipt.value == '' || !lock.value) {
    return;
  }
  nowmessagelist.value.push({
    message: ipt.value,
    name: name,
    avatar: userInfo.value.avatarUrl
  })
  setTimeout(() => {
    nowmessagelist.value.push({
      message: '',
      name: 'DeepSeek',
    })
  }, 500);
  sendai();

  ipt.value = '';

}
function getImageUrl(name) {
  if (name == 'DeepSeek' || name == 'AI') {
    return new URL(`./image/${name}.png`, import.meta.url).href
  } else {
    return userInfo.value.avatarUrl
  }
}
//终止ai发言
function stop() {
  if (nowmessagelist.value[nowmessagelist.value.length - 1].message == '') {
    nowmessagelist.value.pop();
  }
  socket.emit('stopGeneration', { conversationId: conversationId.value });
  lock.value = true;
}

</script>

<template>
  <div class="room">

    <div class="header">ai聊天</div>
    <div class="main">
      <el-empty v-if="nowmessagelist.length == 0" :image="getImageUrl('AI')" description="已接入deepseek" />
      <div class="chat" v-for="item, index in nowmessagelist" :key="index">
        <div class="chat-left"><img :src="getImageUrl(item.name)" alt=""></div>
        <div class="chat-right">
          <div class="username">{{ item.name }}</div>

          <div class="chat-content">
            <div v-if="item.message == '' && item.name == 'DeepSeek'" class="circle">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <template v-else>
              {{ item.message }}
            </template>
          </div>
        </div>
      </div>

    </div>
    <div class="footer">
      <!-- <div class="ipt" @click="stop()" v-if="!lock">等ai说完</div> -->
      <textarea v-model="ipt" class="ipt" type="textarea" placeholder="不懂问ai" @keydown.enter="push()" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import url('./css/index.scss')
</style>
